<template>
  <div class="i18n-select-container">
    <el-select v-model="modelValue" :multiple="props.multiple" :placeholder="props.placeholder" @change="onChange" style="width: 100%">
      <el-option :label="option.name[lang]" :key="index" :value="option.id" v-for="(option, index) in props.options" />
    </el-select>
  </div>
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import {useI18n} from 'vue-i18n'
import useAppStore from '@/store/modules/app'
const appStore = useAppStore()
const { t } = useI18n()

const props = defineProps({
  modelValue: propTypes.array.def([]),
  placeholder: propTypes.string.def(''),
  type: propTypes.string.def('text'),
  options: propTypes.array.def([]),
  keyAlias: propTypes.string.def('id'),
  valueAlias: propTypes.string.def('name'),
  multiple: propTypes.bool.def(true),
})

const emit = defineEmits(['update:modelValue'])

const modelValue = ref<any>([])

const lang = ref<string>(appStore.appLanguage)

watch(() => props.modelValue,
  (newV) => {
    if(newV) {
      modelValue.value = newV
    }
  },
  {
    immediate: true,
    deep: true,
  }
)

const onChange = (data:any) => {
  emit('update:modelValue', data)
}
</script>

<style scoped>
.i18n-select-container {
  width: 100%;
}
</style>
